<!--
角色管理页
单仕瑞
2017年4月12日 13:44:41
-->
<template>
  <div>
    <el-form :inline="true" class="clearfix top">
      <el-form-item>
        <el-input v-model="keyword" size="small" style="vertical-align: top"></el-input>
      </el-form-item>
      <el-popover :offset="-65" v-model="popShow"
        placement="bottom"
        width="300"
        trigger="click">
        <ul class="search_result">
          <li v-for="item in searchResultListPd" @click="moveLight(item,1)">{{item.name}}</li>
          <li v-for="item in searchResultList" @click="moveLight(item,2)">{{item.address}}</li>
        </ul>
        <el-button slot="reference" type="primary" @click.native="search" size="small" style="line-height:14px;vertical-align: top;" :disabled="!keyword">查询</el-button>
      </el-popover>

      <el-form-item style="margin-left: 10px;">
        <el-checkbox-group v-model="checkList" @change="changeTream">
          <el-checkbox :label="item.id" :value="item.id" v-for="item in teamList">{{item.name}}</el-checkbox>
        </el-checkbox-group>
<!--        <el-select v-model="user.treamId" style="width: 100%" placeholder="团队"-->
<!--                   :disabled="false" @change="init()">-->
<!--          <el-option v-for="(item, index) in teamList" :key="index" :label="item.name" :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
      </el-form-item>
      <el-form-item style="float: right;">
        <el-button type="primary" v-if="canLook && !toPdDetail" @click="showDetail" size="small" style="line-height:14px;vertical-align: top;">{{lightPoint.address}}路灯详情</el-button>
        <el-button type="primary" v-if="canLook && toPdDetail" @click="goPdDetail" size="small" style="line-height:14px;vertical-align: top;">{{pdPoint.name}}配电箱详情</el-button>
        <el-button type="danger" v-if="canLook && isBad" @click="goBadList" style="line-height:14px;vertical-align: top;" size="small">查看故障
        </el-button>
      </el-form-item>
    </el-form>
    <div id="map"></div>
    <el-dialog v-if="showAdd" title="路灯详情" :visible.sync="showAdd" :close-on-click-modal="false" >
      <el-form :model="streetLamp" label-width="140px" :rules="streetLampFormRules" ref="streetLamp"
               style="margin-top: -15px;">
        <!--<el-form-item label="路灯编号" prop="meterAddr">-->
        <!--<el-input v-model="streetLamp.meterAddr" :maxlength="50"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="路灯地址" prop="address">
          <el-input v-model="streetLamp.address" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="安装类型" prop="streetLampType">
          <el-input v-model="streetLamp.streetLampType" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门选择" prop="deptid">
          <el-input v-model="streetLamp.deptName" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属班组" prop="treamId">
          <el-input v-model="streetLamp.treamName" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属控制箱" prop="distributionBoxid">
          <el-input v-model="streetLamp.distributionBoxName" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="坐标" prop="lngLat">
          <el-input v-model="streetLamp.lngLat" :maxlength="50" @change="getAdress" disabled></el-input>
        </el-form-item>
        <el-form-item label="现场位置" prop="liveArea">
          <el-input v-model="streetLamp.liveArea" :maxlength="255" type="textarea" disabled></el-input>
        </el-form-item>
        <el-form-item label="支路选择" prop="roadId">
          <el-input v-model="streetLamp.roadName" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="streetLamp.remark" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属行政区域" prop="">
          <el-input v-model="streetLamp.area" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="道路等级" prop="">
          <el-input v-model="streetLamp.level" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="灯杆编号" prop="">
          <el-input v-model="streetLamp.number" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="灯杆数量" prop="">
          <el-input v-model="streetLamp.num" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="投运时间(灯杆数量)" prop="">
          <el-input v-model="streetLamp.puttime" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="资产原值(灯杆数量)" prop="">
          <el-input v-model="streetLamp.propertynum" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="灯杆高度" prop="">
          <el-input v-model="streetLamp.height" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="灯杆基础尺寸" prop="">
          <el-input v-model="streetLamp.baticsize" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="灯具功率" prop="">
          <el-input v-model="streetLamp.power" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="投运时间(灯具功率)" prop="">
          <el-input v-model="streetLamp.powertime" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="资产原值(灯具功率)" prop="">
          <el-input v-model="streetLamp.propertypower" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="灯具数量" prop="">
          <el-input v-model="streetLamp.lanternsnum" :maxlength="255" disabled></el-input>
        </el-form-item>
        <el-form-item label="灯具生产厂家" prop="">
          <el-input v-model="streetLamp.company" :maxlength="255" disabled></el-input>
        </el-form-item>

        <!--<el-form-item label="部门id" prop="deptid">-->
        <!--<el-input v-model="streetLamp.deptid" :maxlength="100"></el-input>-->
        <!--</el-form-item>-->
      </el-form>
      <!--<div scope="footer" class="dialog-footer" style="float: right;margin-bottom: 20px;">-->
        <!--<el-button @click="resetStreetLamp">取 消</el-button>-->
        <!--<el-button type="primary" @click="handleSubmit" :loading="saveAccountLoading">保 存</el-button>-->
      <!--</div>-->
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  // import menuControl from './menuControl.vue'
  import {buttonAuth, resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  import $ from 'jquery'

  export default {
    data () {
      return {
        user:{},
        lightList:[],
        pdList:[],
        map:{},
        pdLightList:[],
        keyword:"",
        lightPoint:{},
        pdPoint:{},
        canLook:false,
        toPdDetail:false,
        isBad:false,
        showAdd: false,
        streetLamp:{},
        searchResultList:[],
        searchResultListPd:[],
        teamList:[],
        popShow:false,
        checkList:[]
      }
    },
    methods: {
      changeTream(ids){
        console.log(ids)
        this.user.treamId = ids.toString();
        this.init()
      },
      moveLight(item,moveType){
        var that = this;
        let longitude = item.lngLat.split(",")[0]
        let latitude = item.lngLat.split(",")[1]
        console.log(item)
        this.map.setCenter([longitude, latitude])
        if(moveType == 1){this.map.setZoom(16)}else{this.map.setZoom(19)}
        this.searchResultList = []
        this.searchResultListPd = []
        this.popShow = false;
        if(moveType == 2 && item.distributionBoxid && item.distributionBoxid != 0){
          var params = {
            userName: that.user.userName,
            pageNumber: 1,
            pageSize: 1000,
            filter: 1,
            distributionBoxid: item.distributionBoxid,
          }
          that.$http.post('/smartLight/web/streetLamp/getList.htm', params).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              that.lightList = resBody.result.content;
              if(that.lightMarker){that.map.remove(that.lightMarker)}
              that.getPdLightMarkers()
              that.getpdMarkers();
            }
          })
        }
      },
      showDetail(){
        var params = {
          id: this.lightPoint.id,
        }
        this.$http.post('/smartLight/web/streetLamp/getById.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.streetLamp = resBody.result;
            this.showAdd = true
            console.log(resBody.result)
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      goBadList(){
        this.$router.push({path: '/exceptionReportList?address='+this.lightPoint.address})
      },
      goPdDetail(){
        this.$router.push({path: '/pdBoxDetail?id='+this.pdPoint.id})
      },
      search(){
        if(!this.keyword){
          return
        }
        var that = this
        var params = {
          userName: this.user.userName,
          address: this.keyword,
          pageNumber: 1,
          pageSize: 1000,
          deptId: this.user.deptId,
          treamId: this.user.treamId != 0?this.user.treamId:'',
        }
        that.$http.post('/smartLight/web/streetLamp/getList.htm', params).then(response => {
          var resBody = response.body
          console.log(resBody.result.content)
          if (resBody.isSuccess === 0) {
            this.searchResultList = resBody.result.content;
          }
        })
        var params = {
          name: this.keyword,
          userName: this.user.userName,
          pageNumber: 1,
          pageSize: 1000,
          filter: 1,
          deptId: this.user.deptId,
          treamId: this.user.treamId != 0?this.user.treamId:'',
        }
        this.$http.post('/smartLight/web/distridutionBox/getList.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            console.log(resBody.result.content)
            this.searchResultListPd = resBody.result.content
          }
        })
      },
      init() {
        var that = this
        var params = {
          userName: this.user.userName,
          pageNumber: 1,
          pageSize: 10000,
          filter: 1,
          deptId: this.user.deptId,
         treamId: this.user.treamId,
//           treamId: "16,13",
          choosenTreamId: 1
          // name:"迎宾大道"
        }

        console.log(params)

        if(!this.user.treamId){
          this.map.clearMap();
          return
        }
        this.$http.post('/smartLight/web/distridutionBox/getList.htm', params).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            console.log(resBody.result)
            this.map.clearMap();
            if(resBody.result.content.length == 0){
                return
            }
            this.pdList = resBody.result.content
            let longitude = this.pdList[0].lngLat.split(",")[0]
            let latitude = this.pdList[0].lngLat.split(",")[1]
            this.map.setCenter([longitude, latitude])
            this.getpdMarkers()
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })

        //获取配电箱
//        wx.request({
//          url: app.url + '/web/distridutionBox/getList.htm',
//          data: encodingStr,
//          method: 'POST',
//          success: function(res) {
//            var decodingStr = app.ecbDecrypto(res.data);
//            var rest = JSON.parse(decodingStr)
//            console.log(rest)
//            if (rest.isSuccess == 0) {
//              that.setData({
//                pdList: list
//              })
//              that.setData({
//                markers: that.getpdMarkers(),
//              })
//
//            }
//          },
//        })
      },
      getpdMarkers() {
        var market = [];
        for (let item of this.pdList) {
          let marker1 = this.createPdMarker(item);
          market.push(marker1)
        }
        if (this.pdLightList.length > 0) {
          for (let item of this.pdLightList) {
            let marker1 = this.createPdLightMarker(item);
            market.push(marker1)
          }
        }
        this.map.add(market);
//        return market;
      },
      getPdLightMarkers() {
        var market = [];
        for (let item of this.lightList) {
          let marker1 = this.createPdLightMarker(item);
          market.push(marker1)
        }
        this.lightMarker = market;
        this.map.add(market);
      },
      createPdMarker(point) {
        var that = this;
        let arr = point.lngLat.split(",");
        let latitude = arr[1];
        let longitude = arr[0];
        let state = point.state || '无'
        let address = point.address || '无';
        let marker = new AMap.Marker({
          position: new AMap.LngLat(longitude, latitude),
          icon: new AMap.Icon({
            size: new AMap.Size(27, 27),
            image: this.pdId == point.id ? "../../../static/images/pd_02.png":"../../../static/images/pd_01.png",
            imageSize: new AMap.Size(27, 27),
          }),
          offset: new AMap.Pixel(-13, -30),
          label:{
            content: "<div class='info'>"+ point.name +"</div>", //设置文本标注内容
            direction: 'top' //设置文本标注方位
          },
          clickable:true
        });
        AMap.event.addListener(marker, 'click', function(e) {
          that.pdId = point.id;
          that.toPdDetail = true;
          that.canLook = true;
          that.pdPoint = point;
          console.log(point)
          var params = {
            userName: that.user.userName,
            pageNumber: 1,
            pageSize: 1000,
            filter: 1,
            distributionBoxid: that.pdId,
          }
          that.$http.post('/smartLight/web/streetLamp/getList.htm', params).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              that.lightList = resBody.result.content;
              console.log(that.lightList)
              if(that.lightMarker){that.map.remove(that.lightMarker)}
              that.getPdLightMarkers()
              that.getpdMarkers();
            }
          })
        })
        return marker;
      },
      createPdLightMarker(point) {
        let that = this;
        let arr = point.lngLat.split(",");
        let latitude = arr[1];
        let longitude = arr[0];
        let state = point.state || '无'
        let address = point.address || '无';
        let marker = new AMap.Marker({
          position: new AMap.LngLat(longitude, latitude),
          icon: new AMap.Icon({
            size: new AMap.Size(27, 27),
            image: point.state == 0 ? "../../../static/images/light_03.png":"../../../static/images/light_02.png",
            imageSize: new AMap.Size(27, 27),
          }),
          offset: new AMap.Pixel(-13, -30),
          label:{
            content: "<div class='info'>"+ point.address +"</div>", //设置文本标注内容
            direction: 'top' //设置文本标注方位
          },
          clickable:true
        });
        AMap.event.addListener(marker, 'click', function(e) {
          that.isBad = point.state == 1
          that.lightPoint = point;
          that.toPdDetail = false;
          that.canLook = true;
        })
        return marker;
      },
      getTeamList (formChange) {
        var para = {
          pageNumber: 1,
          pageSize: 10000,
          type: this.companytype,
          deptid: 4
        }
        this.$http.post('/smartLight/web/sysTream/getList.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.teamList = resBody.result.content
          }
        })
      },
    },
    mounted () {
      this.user = JSON.parse(sessionStorage.getItem("user"))
      console.log(this.user)
      this.getTeamList()
      if(this.user.roleId != 315){
        this.init()
      }
      this.map = new AMap.Map("map", {
        resizeEnable: true,
      });
    },
    components: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
   #map{
    height 700px;
  }

  .amap-marker-label{
    border none;
    padding 2px;
  }
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
    .top .el-form-item{
    margin-bottom 0;
  }
    /deep/.el-input.is-disabled .el-input__inner,/deep/.el-textarea.is-disabled .el-textarea__inner{
      background-color #fff!important
      color #000!important
      cursor auto
    }
  .search_result{
    height 300px;
    overflow-y auto;
    margin-left 20px;
    line-height 25px;
    padding 0;
    cursor pointer
  }
</style>
